<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <ul>
      <li v-for="item of artists">
        <router-link
          :to="{ name: 'ArtistDetailDetail', params: { id: item.id } }"
        >
          {{ item.name }}
        </router-link>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'Home',
  data() {
    return {
      artists: []
    }
  },
  created() {
    fetch("https://koo-music.vercel.app/artist/list")
      .then(res => res.json())
      .then(res => {
        const { artists } = res
        this.artists = artists
        console.log(res)
      })
  }
}
</script>
